<style lang="less">
  .row1 {
    line-height: 30px;
  }

  .divider1 {
    margin: 2px 0px;
  }

  .pb3 {
    padding-bottom: 3px;
  }

  .w7 {
    width: 7%;
  }

  .mb20 {
    margin-bottom: 20px;
  }

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
  }

  .t-center {
    text-align: center;
  }

  .item_stars {
    color: #f90;
    font-size: 15px;
    vertical-align: text-bottom;
  }

  .search_style {
    margin-bottom: 20px;
  }
</style>

<template>
  <div>

    <Modal v-model="display_model1_obj.modal1" :title="display_model1_obj.text" width="900" cancel-text="关闭"
           @on-ok="display_model1_obj.modal2 = true" @on-cancel="display_model1_obj.modal1 = false" ok-text="确认办理">
      <Row class="h200">
        <Col class="demo-spin-col" span="24" v-if="loading_iteminfo">
          <Spin fix>
            <Icon type="ios-loading" size=24 class="demo-spin-icon-load"></Icon>
          </Spin>
        </Col>
      </Row>
      <Form :model="iteminfo" label-position="right" :label-width="100" v-if="!loading_iteminfo">
        <Row>
          <Col span="6" class="ivu-form-item-label">受理地点：</Col>
          <Col span="14" class="ivu-form-item-content">{{iteminfo.ACCEPT_ADDRESS}}</Col>
        </Row>
        <Row>
          <Col span="6" class="ivu-form-item-label">受理时间：</Col>
          <Col span="14" class="ivu-form-item-content">{{iteminfo.ACCEPT_TIME}}</Col>
        </Row>
        <Row>
          <Col span="6" class="ivu-form-item-label">受理条件：</Col>
          <Col span="14" class="ivu-form-item-content">{{iteminfo.APPLY_CONDITION}}</Col>
        </Row>
        <Row>
          <Col span="6" class="ivu-form-item-label">补充说明：</Col>
          <Col span="14" class="ivu-form-item-content">{{iteminfo.SXSM}}</Col>
        </Row>
        <Row>
          <Col span="24" class="ivu-form-item-content t-center">
            <img :src="iteminfo.FILEPATH" alt="..." style="height: 500px; width:600px">
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal v-model="display_model2_obj.modal2" :title="display_model2_obj.text" width="500" cancel-text=""
           @on-ok="display_model2_obj.modal2 = false" ok-text="取消" @on-cancel="display_model2_obj.modal2 = false"
           :closable="false">
      <Form label-position="right" :label-width="100">
        <Row>
          <Col span="6" offset="7">
            <Button type="success" size="large" @click="banli(display_model2_obj)">持证办理</Button>
          </Col>
          <Col span="6">
            <Button type="warning" size="large" @click="faceAuth(display_model2_obj)">无证办理</Button>
          </Col>
          <!-- <Col span="6" class="ivu-form-itemoption-label">身份证号：</Col>
          <Col span="12" class="ivu-form-itemoption-content">
          <Input v-model="user.cardno" placeholder="输入身份证号..."></Input>
          </Col> -->
        </Row>
      </Form>
    </Modal>
    <Modal v-model="display_model3_obj.modal3" :title="display_model3_obj.text" width="700" cancel-text="关闭"
           @on-ok="ok3(display_model3_obj)" @on-cancel="display_model3_obj.modal3 = false" :closable="false">
      <Form :model="user" label-position="right" :label-width="100">
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">姓名：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.Name" placeholder="输入姓名."></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">身份证号：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.IDNumber" placeholder="输入身份证号."></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">手机号：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.mobile" placeholder="13912345678"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">地址：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.Address" placeholder="辽宁省沈阳市和平区xx街xx社区"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">民族：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.Nation" placeholder="例如：汉"></Input>
          </Col>
          <Col span="5" class="ivu-form-item-label">兵役情况：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.military" placeholder=""></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">户籍：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.household_register" placeholder=""></Input>
          </Col>
          <Col span="5" class="ivu-form-item-label">个人收入：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.personal_income" placeholder="例如：3000"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">工作单位：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.work_unit" placeholder=""></Input>
          </Col>
          <Col span="5" class="ivu-form-item-label">户主关系：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.household_relationship" placeholder="本人"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">户籍住址：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.domicile_address" placeholder=""></Input>
          </Col>
          <Col span="5" class="ivu-form-item-label">现住址：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.present_address" placeholder=""></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">文化程度：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Input v-model="user.education" placeholder="输入文化程度."></Input>
          </Col>
          <Col span="5" class="ivu-form-item-label">婚姻状况：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Select v-model="user.marriage">
              <Option value="未婚">未婚</Option>
              <Option value="已婚">已婚</Option>
              <Option value="初婚">初婚</Option>
              <Option value="再婚">再婚</Option>
              <Option value="复婚">复婚</Option>
              <Option value="丧偶">丧偶</Option>
              <Option value="离婚">离婚</Option>
              <Option value="未说明">未说明</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">政治面貌：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Select v-model="user.political_outlook">
              <Option value="群众">群众</Option>
              <Option value="中国共产党员">中国共产党员</Option>
              <Option value="中国共产党预备党员">中国共产党预备党员</Option>
              <Option value="中国共产主义青年团团员">中国共产主义青年团团员</Option>
              <Option value="中国国民党革命委员会会员">中国国民党革命委员会会员</Option>
              <Option value="中国民主同盟盟员">中国民主同盟盟员</Option>
              <Option value="中国民主建国会会员">中国民主建国会会员</Option>
              <Option value="中国民主促进会会员">中国民主促进会会员</Option>
              <Option value="中国农工民主党党员">中国农工民主党党员</Option>
              <Option value="中国致公党党员">中国致公党党员</Option>
              <Option value="九三学社社员">九三学社社员</Option>
              <Option value="台湾民主自治同盟盟员">台湾民主自治同盟盟员</Option>
              <Option value="无党派民主人士">无党派民主人士</Option>
            </Select>
          </Col>
          <Col span="5" class="ivu-form-item-label">职业：</Col>
          <Col span="6" class="ivu-form-item-content">
            <Select v-model="user.occupation">
              <Option value="国家机关,党群组织,企业,事业单位负责人">国家机关,党群组织,企业,事业单位负责人</Option>
              <Option value="专业技术人员">专业技术人员</Option>
              <Option value="办事人员和有关人员">办事人员和有关人员</Option>
              <Option value="商业,服务业人员">商业,服务业人员</Option>
              <Option value="农,林,牧,渔,水利业生产人员">农,林,牧,渔,水利业生产人员</Option>
              <Option value="生产,运输设备操作及有关人员">生产,运输设备操作及有关人员</Option>
              <Option value="军人">军人</Option>
              <Option value="其他从业人员">其他从业人员</Option>
              <Option value="无业人员">无业人员</Option>
            </Select>
          </Col>
        </Row>
        <img :src="nophoto" alt="..." style="height: 120px; width:100px;position:absolute;right:16%;top:13%;">
      </Form>
    </Modal>
    <Modal v-model="display_model4_obj.modal4" :title="display_model4_obj.text" width="700" cancel-text="关闭"
           @on-ok="ok3(display_model4_obj)" @on-cancel="display_model4_obj.modal4 = false" :closable="false">
      <face-comparison :isPlay="display_model4_obj.modal4" @img-result="imgResult"></face-comparison>
    </Modal>
    <Row class="search_style">
      <Col span="6" offset="1" class="ivu-form-item-content">
        <Input v-model="searchinfo">
          <span slot="prepend">事项标题</span>
        </Input>
      </Col>
      <Col span="6" offset="2" class="ivu-form-item-content">
        <Button type="primary" @click="searchItem">
          <Icon type="ios-search"/>
          搜索
        </Button>
      </Col>
    </Row>
    <Collapse v-model="value1" accordion>
      <Panel v-for="(item, index) in list" v-if="item.show" v-bind:key="index" :name="item.index1">
        {{item.name}}（{{item.org_id}}）
        <p slot="content" v-for="(item2, index2) in item.datalist" v-if="item2.show" v-bind:key="index2">
          <Row class="row1">
            <Col span="18">
              <Icon type="md-star" class="item_stars"/>
              {{item2.text}}
            </Col>
            <Col span="2" class="pb3 w7">
              <Button type="warning" class="step-item" @click="openProcess(item2)">办理流程</Button>
              <!-- model 1 -->
            </Col>
            <Col span="4" class="pb3">
              <Button type="info" class="step-item" @click="model2Display(item2)">事项提报</Button>
              <!-- model 2 -->
              <!--model 33 -->
            </Col>
          </Row>
          <Divider class="divider1"/>
        </p>
      </Panel>
    </Collapse>
  </div>
</template>
<script>

import { eventlist, iteminf, userinfo, createuser } from '@/api/eventlist'
import nophoto from '@/assets/images/nophoto.jpeg'
// import { idcard } from '@/api/idcard'
import { upBase64 } from '@/api/common'
import FaceComparison from '_c/face-comparison'

export default {
  components: { FaceComparison },
  data () {
    return {
      errMsg: {
        show: false,
        msg: ''
      },
      loading: false,
      serverResult: '',
      value1: '1',
      searchinfo: '',
      list: [],
      iteminfo: {},
      loading_iteminfo: false,
      user: {
        'cardno': ''
      },
      nophoto,
      display_model1_obj: Object,
      display_model2_obj: Object,
      display_model3_obj: Object,
      display_model4_obj: Object
    }
  },
  methods: {
    ShowInfo (op) {
      this.errMsg = { show: true, msg: op }
      let that = this
      setTimeout(function () {
        that.errMsg = { show: false, msg: '' }
      }, 3000)
    },
    faceAuth (item) {
      item.modal4 = true
      this.display_model4_obj = item
    },
    banli (item) {
      console.log(item)
      // this.$router.push({
      //  name: 'subsistenceapplication',
      //  params: {
      //    cardno: '220122198701072519'
      //  }
      // })
      item.modal3 = true
      this.display_model3_obj = item
      let that = this
      idcard().then(data => {
        that.loading = false
        let json = Object
        if (typeof data.data === 'object') {
          json = data.data
        } else {
          json = evil(data.data)
          that.serverResult = json
          that.cardInfo = json.Certificate
          that.nophoto = 'data:image/png;base64,' + json.Certificate.Base64Photo
        }
        var CertificateInfo = json.Certificate
        console.log(CertificateInfo)
        that.user = CertificateInfo
        userinfo(that.user.IDNumber).then(res => {
          if (res.data.data) {
            if (item.id === '37251') {
              that.$router.push({
                name: 'subsistenceapplication',
                params: {
                  cardno: that.user.IDNumber
                }
              })
            } else {
              that.$router.push({
                name: 'handinformation',
                params: {
                  itemid: item.id,
                  cardno: that.user.IDNumber
                }
              })
            }
          } else {
            item.modal3 = true
            that.display_model3_obj = item
          }
        })
      }).catch(err => {
        that.loading = false
        that.ShowInfo('没有找到读卡设备')
        console.log(err)
      })
    },
    openProcess (item) {
      item.modal1 = true
      this.display_model1_obj = item
      this.loading_iteminfo = true
      iteminf(item).then(res => {
        if (res.data.data) {
          this.iteminfo = res.data.data
          this.loading_iteminfo = false
        } else {
          this.$Notice.error({
            title: '查询事项详细信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    searchItem () {
      this.list.forEach(element => {
        let curNum = 0
        element.datalist.forEach(e2 => {
          e2.show = false
          if (e2.text.indexOf(this.searchinfo) >= 0) {
            e2.show = true
            curNum++
          }
        })
        element.show = false
        if (curNum > 0) {
          element.show = true
        }
      })
    },
    ok2 (item) {
      userinfo(this.user.cardno).then(res => {
        if (res.data.data) {
          if (item.id === '37251') {
            this.$router.push({
              name: 'subsistenceapplication',
              params: {
                cardno: this.user.cardno
              }
            })
          } else {
            this.$router.push({
              name: 'handinformation',
              params: {
                itemid: item.id,
                cardno: this.user.cardno
              }
            })
          }
        } else {
          item.modal3 = true
        }
      })
    },
    ok3 (item) {
      console.log(this.user)
      // if (!this.user.mobile || !/^1\d{10}$/.test(this.user.mobile)) {
      //   this.$Notice.error({
      //     title: '添加人员信息失败',
      //     desc: '手机号格式不正确'
      //   })
      //   return
      // }
      let that = this
      let userCardInfo = this.serverResult.Certificate
      upBase64(userCardInfo.Base64Photo).then(data => {
        that.user.idphoto = data.data.result
        that.user.cardno = that.user.IDNumber
        that.user.folk = userCardInfo.Nation
        that.user.address = userCardInfo.Address
        that.user.name = userCardInfo.Name
        createuser(that.user).then(res => {
          if (res.data.errcode === 0) {
            that.$Notice.success({
              title: '新人员信息添加成功'
            })
            that.$router.push({
              name: 'handinformation',
              params: {
                itemid: item.id,
                cardno: this.user.cardno
              }
            })
          } else {
            that.$Notice.error({
              title: '添加人员信息失败',
              desc: res.data.errmsg
            })
          }
        })
      })
    },
    model2Display (item) {
      item.modal2 = true
      this.display_model2_obj = item
    },
    imgResult (result) {
      this.display_model2_obj.modal2 = false
      this.display_model4_obj.modal4 = false
      if (this.display_model2_obj.id === '37251') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: {
            cardno: result
          }
        })
      } else {
        this.$router.push({
          name: 'handinformation',
          params: {
            itemid: this.display_model2_obj.id,
            cardno: result
          }
        })
      }
      console.log(result, '人脸识别后的结果')
    }
  },
  mounted () {
    eventlist().then(res => {
      let indexMap = {}
      let tempList = []
      if (res.data.data) {
        res.data.data.forEach(element => {
          element.modal1 = false
          element.modal2 = false
          element.modal3 = false
          element.modal4 = false
          element.show = true
          let index = indexMap['a' + element.ORG_ID]
          if (index) {
            tempList[index - 1].datalist.push(element)
          } else {
            let para = {
              'name': element.type_name,
              'org_id': element.ORG_ID,
              'index1': tempList.length + 1 + '',
              'datalist': [],
              'show': true
            }
            para.datalist.push(element)
            tempList.push(para)
            indexMap['a' + element.ORG_ID] = tempList.length
          }
        })
        this.list = tempList
      } else {
        this.$Notice.error({
          title: '获取事项列表失败',
          desc: res.data.errmsg
        })
      }
    })
  }
}
</script>
